<template>
	<view class="container">
		<view class="tui-addr-box">
			<form @submit="formSubmit" @reset="formReset">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商品名称</view>
		
						<input placeholder-class="tui-phcolor" class="tui-input" name="goods_name" placeholder="请输入商品名称" v-model="goodsData['goods_name']"
							maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false" padding="0" :arrow="true">
					<view class="tui-line-cell">
						<view class="tui-title">商品分类</view>
						<picker :value="category_id" @change="bindPickerChange" :range="array" range-key="category_name"
							v-if="array" name="category_id">
							<view class="input-select">{{array[index].category_name}}</view>
						</picker>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">市场价</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="market_price" v-model="goodsData['market_price']"
							placeholder="请输入市场价" maxlength="50" type="digit" />
					</view>
				</tui-list-cell>

				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">销售价</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="price" placeholder="请输入销售价" v-model="goodsData['promotion_price']"
							maxlength="50" type="digit" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">库存</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="stock" placeholder="请输入库存" v-model="goodsData['stock']"
							maxlength="50" type="number" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商品单位</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="goods_unit" placeholder="请输入商品单位" v-model="goodsData['goods_unit']"
							maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商品简介</view>
						<textarea class="tui-textarea" name="introduction" placeholder="" maxlength="200" v-model="goodsData['introduction']"
							placeholder-class="tui-phcolor-color" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">商品图片</view>
						<view class="tui-upload-box">
							<view class="fin_img tui-upload-item" v-for="(item,index) in imgs" :key="index">
								<image :src="item" class='tui-upload-img' @tap="previewImage" mode="aspectFill"
									:id="item"></image>
								<view class="tui-upload-del">
									<tui-icon color="#ed3f14" :size="18" name="close-fill" :index="index"
										@click="deleteImage"></tui-icon>
								</view>
							</view>
							<view class="fin_img tui-upload-add" v-if="imgs.length < 9" hover-class="tui-opcity"
								:hover-stay-time="150" @tap="chooseImage">
								<view class="icon_cam">
									<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>

								</view>
								<view class="fin_txt">上传照片</view>

							</view>
						</view>
					</view>


				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell fin-list">
						<view class="tui-title">商品详情图</view>
						<view class="tui-upload-box">
							<view class="fin_img tui-upload-item" v-for="(item,index) in files" :key="index">
								<image :src="item" class='tui-upload-img' @tap="previewImages" mode="aspectFill"
									:id="item"></image>
								<view class="tui-upload-del">
									<tui-icon color="#ed3f14" :size="18" name="close-fill" :index="index"
										@click="deleteImages"></tui-icon>
								</view>
							</view>
							<view class="fin_img tui-upload-add" v-if="files.length < 9" hover-class="tui-opcity"
								:hover-stay-time="150" @tap="chooseImages">
								<view class="icon_cam">
									<tui-icon name="camera-add" :size="28" color="#ababab"></tui-icon>

								</view>
								<view class="fin_txt">上传照片</view>

							</view>
						</view>
					</view>


				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">是否上架</view>
						<radio-group class="radio-group" name="state">
							<label class="tui-radio">
								<radio value="1" color="#ffa72b" checked />上架
							</label>
							<label class="tui-radio">
								<radio value="2" color="#ffa72b" />下架
							</label>
						</radio-group>
					</view>
				</tui-list-cell>
				<!-- 保存地址 -->
				<view class="tui-btn__box">
					<view class="tui-addr-save">
						<tui-button shadow type="danger" height="88rpx" shape="circle" formType="submit"
							:loading="isloading" :disabled="isdisabled">上传产品</tui-button>

					</view>
				</view>
			</form>

		</view>
	</view>
</template>
<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {

				checked: false,

				array: [{
					'name': '商品分类'
				}],
				index: 0,
				goods_name:'',
				goods_id:'',
				goodsData:'',

				imgs: [],
				selected: false,
				value: [0, 0, 0],
				showPickerStatus: false,
				isdisabled: false,
				isloading: false,
				category_id: '',
				files: [] //最多上传9张图片
			};
		},
		onLoad(options) {
			if (options.goods_id) {
				this.goods_id = options.goods_id;
			}
			this.inits()
		},
		onShow() {
			this.tui.haslogin();
		},
		methods: {
			inits() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let category_id = this.tui.request('goods', 'post', datas, 1000, 1, '', 'getCategoryList');
				Promise.resolve(category_id).then((value) => {
					if (value.code == 200) {
						this.array = value.data
						this.category_id = this.array[0].category_id
					}
				})
				if(this.goods_id){
					let data= {
						token: token,
						goods_id:this.goods_id,
						page:1,
					};
					let goods_info = this.tui.request('shop', 'post', data, 1000, 1, '', 'goodsInfo');
					Promise.resolve(goods_info).then((value) => {
						if (value.code == 200) {
							this.goodsData = value.data
							this.imgs=value.data.img_temp_array
							this.files=value.data.description
							
						}
					})
				}
				
				
			},
			chooseImage: function(e) {

				let that = this;
				if (this.imgs.length >= 9) {
					this.tui.toast("最多上传9张图片");
					return
				}

				uni.chooseImage({
					count: 9 - that.imgs.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let max_size = 5 * 1024 * 1024;
						if (res.tempFiles[0].type.indexOf("image") < 0) {
							that.tui.toast("请选择图片类型的文件");
							return;
						}
						if (res.tempFiles[0].size >= max_size) {
							that.tui.toast("上传图片不能超过5M");
							return;
						}

						let token = that.tui.getToken();
						let datas = {
							token: token,
							image: res.tempFiles[0].name,
						};
						let uper = that.tui.uploadFile('shop', datas, res.tempFilePaths[0], 'applyFile');
						Promise.resolve(uper).then((value) => {
							if (value.code == 200) {
								// this.avatar = value.data.file_path;
								that.imgs = that.imgs.concat(value.data.file_path)
							} else {
								that.tui.toast(value.message);
							}
						})
					}
				})

		},
		previewImage: function(e) {
			uni.previewImage({
				current: e.currentTarget.id,
				urls: this.imgs
			})
		},
		bindPickerChange: function(e) {
			this.index = e.detail.value;

			this.category_id = this.array[this.index].category_id
		},
		deleteImage: function(e) {
			const index = e.index;
			this.imgs.splice(index, 1);
		},
		chooseImages: function(e) {
			let that = this;
			if (this.files.length >= 9) {
				this.tui.toast("最多上传9张图片");
				return
			}
			uni.chooseImage({
				count: 9 - that.files.length,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					let max_size = 5 * 1024 * 1024;
					// #ifdef H5
					if (res.tempFiles[0].type.indexOf("image") < 0) {
						this.tui.toast("请选择图片类型的文件");
						return;
					}
					// #endif
					if (res.tempFiles[0].size >= max_size) {
						that.tui.toast("上传图片不能超过5M");
						return;
					}

					let token = that.tui.getToken();
					let datas = {
						token: token,
						image: res.tempFiles[0].name,
					};
					let uper = that.tui.uploadFile('shop', datas, res.tempFilePaths[0], 'applyFile');
					Promise.resolve(uper).then((value) => {
						if (value.code == 200) {
							// this.avatar = value.data.file_path;
							that.files = that.files.concat(value.data.file_path)
						} else {
							that.tui.toast(value.message);
						}
					})
				}
			})
		},
		previewImages: function(e) {
			uni.previewImage({
				current: e.currentTarget.id,
				urls: this.files
			})
		},
		deleteImages: function(e) {
			const index = e.index;
			this.files.splice(index, 1);
		},
		change(e) {
			this.value = e.detail.value;
			this.checked = true;
		},
		formSubmit: function(e) {
			//表单规则
			let rules = [{
				name: "goods_name",
				rule: ["required"], //可使用区间，此处主要测试功能
				msg: ["请输入商品名称"]
			}, {
				name: "state",
				rule: ["required"],
				msg: ["请选择是否上架"]
			}, {
				name: "market_price",
				rule: ["required", "isAmount"],
				msg: ["请输入市场价", "请输入正确的金额"]
			}, {
				name: "price",
				rule: ["required", "isAmount"],
				msg: ["请输入销售价", "请输入正确的金额"]
			}, {
				name: "stock",
				rule: ["required", "isNum"],
				msg: ["请输入库存", "请输入正确的库存"]
			}, {
				name: "goods_unit",
				rule: ["required"],
				msg: ["请输入商品单位"]
			}, {
				name: "introduction",
				rule: ["required"],
				msg: ["请输入商品简介"]
			}, {
				name: "category_id",
				rule: ["required"],
				msg: ["请选择分类"]
			}];
			//进行表单检查
			let formData = e.detail.value;
			let checkRes = form.validation(formData, rules);
			if (!checkRes) {

				if (this.imgs.length == 0) {
					this.tui.toast('商品图片不能为空');
					return;
				}
				if (this.files.length == 0) {
					this.tui.toast('商品详情图不能为空');
					return;
				}
				let token = this.tui.getToken();
				let datas = {
					token: token,
					formData: formData,
					goods_imgs:this.imgs,
					description:this.files,
					goods_name:formData.goods_name,
					category_id:formData.category_id,
					state:formData.state,
					market_price:formData.market_price,
					price:formData.price,
					stock:formData.stock,
					introduction:formData.introduction,
					goods_unit:formData.goods_unit
				};
				if(this.goods_id){
					datas.goods_id=this.goods_id
				}
				this.isloading = true;
				this.isdisabled = true;
				let menth=this.goods_id?'updateGoods':'addGoods';
				let addgoods = this.tui.request('shop', 'post', datas, 1000, 1, '', menth);
				Promise.resolve(addgoods).then((value) => {
					if (value.code == 200) {
				
						this.isloading = false;
						this.isdisabled = false;
						this.tui.toast(value.message);
						uni.navigateTo({
							url: '/pageschild/shop/index'
						});
					} else {
						this.tui.toast(value.message);
						this.isloading = false;
						this.isdisabled = false;
					}
				})
			} else {
				this.tui.toast(checkRes);
				return;
			}
		},
		submit() {
			this.isloading = true;
			this.isdisabled = true;
			let token = this.tui.getToken();
			let datas = {
				token: token,
				company_address_detail: this.company_address_detail,
				latitude_longitude: this.latitude_longitude,
				shop_avatar: this.avatar,

				contacts_phone: this.contacts_phone,
			};
			let franchinese = this.tui.request('shop', 'post', datas, 1000, 1, '', 'editShop');
			Promise.resolve(franchinese).then((value) => {
				if (value.code == 200) {
					this.isloading = false;
					this.isdisabled = false;
					this.tui.toast(value.message);
					uni.navigateTo({
						url: '/pageschild/user/examine'
					});
				} else {
					this.tui.toast(value.message);
					this.isloading = false;
					this.isdisabled = false;
				}
			})
		},


	},
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		margin-top: 20rpx;
		color: #333;
	}

	/*上传*/
	.tui-upload-box {
		width: 96%;
		display: flex;
		flex-wrap: wrap;
		margin-left: 4%;
	}

	.tui-upload-item {
		width: 146rpx;
		height: 146rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

	}

	.tui-upload-item:nth-of-type(3n) {
		margin-right: 0;
	}

	.tui-upload-img {
		width: 146rpx;
		height: 146rpx;
		display: block;
	}

	.tui-upload-del {
		position: absolute;
		right: -18rpx;
		top: -18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-upload-add {
		width: 220rpx;
		height: 220rpx;
		font-size: 68rpx;
		font-weight: 100;
		color: #888;
		/* background-color: #F7F7F7; */
		/* display: flex; */
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	/* picker start*/

	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}

	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}

	.radio-group {
		margin-left: -120rpx;
		transform: scale(0.7);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;

		font-size: 36rpx;
		vertical-align: middle;
	}

	.tui-list-item::after {
		left: 0;
	}

	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}

	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}

	.picker-view {
		width: 100%;
		height: 260px;
	}

	.item {
		text-align: center;
	}

	.picker-item {
		text-align: center
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.ag_title {
		margin: 40rpx 40rpx 0 30rpx;
		display: flex;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 20rpx;
	}

	.uni-uploader__img {
		width: 100%;
		height: 100%;
	}

	.tui-input {
		width: 500rpx;
		font-size: 28rpx;
	}

	.agreement {
		color: #ff241d
	}

	.tui-btn__box {
		width: 100%;
		padding: 20px 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.fin-list {
		justify-content: space-between;
	}

	.fin_img {
		border: 1px dashed #d9d8d8;
		border-radius: 10rpx;
		width: 146rpx;
		height: 146rpx;
		/* margin: 1rpx 0; */
	}

	.icon_cam {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;
	}

	.fin_txt {
		font-size: 20rpx;
		text-align: center;
		color: #707070
	}

	.tui-textarea {
		border: 2rpx solid #efeeee;
		height: 120rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 26rpx;
		/* 		background:#f8f7f6; */
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.input-select {
		width: 400rpx;
		display: inline-block;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}

	.yui-location {
		position: absolute;
		right: 20rpx;
		color: #ee980e;
		font-size: 24rpx;
	}

	.yui-location-icon {
		color: #f00
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #E41F19;
		border-color: #E41F19;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
